{% extends "base.html" %}

{% block head %}

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename='kline/dist/kline.js') }}"></script>
<script src="{{ url_for('static', filename='kline/lib/jquery.mousewheel.js') }}"></script>
<!--<script src="{{ url_for('static', filename='kline/lib/sockjs.js') }}"></script>-->
<!--<script src="{{ url_for('static', filename='kline/lib/stomp.js') }}"></script>-->
<!--<script src="{{ url_for('static', filename='kline/lib/require.js') }}"></script>-->
<style>
    .row {
        width: 100%;
    }

    .editor {
        border: 1px solid #000000;
    }

    .buy {
        height: 60px;
        width: 60px;
        color: whitesmoke;
        text-align: center;
        border-radius: 2px;
        line-height: 60px;

    }

    .sell {
        height: 60px;
        width: 60px;
        color: whitesmoke;
        text-align: center;
        border-radius: 2px;
        line-height: 60px;
    }

    .send_order {
        padding: 0px;
        margin: 0px;

    }

    #block {
        margin: 10px;
    }

</style>

{% endblock %}

{% block body %}

<h2>个人终端</h2>
<pre id="cock"></pre>
<div></div>

<div class="row" style="height: 1200px;">
    <div class="col-md-12">
        <div id="kline_container"></div>
        <div class="row">
            <div class="col-md-7">
                <div class="data col-md-12" id="content">
                    <div>
                        <!-- Nav tabs -->

                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#position_data"
                                                                      aria-controls="position_data"
                                                                      role="tab"
                                                                      data-toggle="tab">持仓数据</a></li>
                            <li role="presentation"><a href="#un_traded" aria-controls="un_traded" role="tab"
                                                       data-toggle="tab">待成交数据</a>
                            </li>
                            <li role="presentation"><a href="#order_data" aria-controls="order_data" role="tab"
                                                       data-toggle="tab">发单数据</a></li>
                            <li role="presentation"><a href="#trade_data" aria-controls="trade_data" role="tab"
                                                       data-toggle="tab">成交数据</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="position_data"></div>
                            <div role="tabpanel" class="tab-pane" id="un_traded"></div>
                            <div role="tabpanel" class="tab-pane" id="order_data"></div>
                            <div role="tabpanel" class="tab-pane" id="trade_data"></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="data col-md-12 send_order" id="send_order">
                    <div id="block">
                        <h3>下单控制台</h3>
                        <div style="width: 100%">
                            <div class="row">
                                <div class="col-md-3 send_order">价格类型</div>
                                <div class="col-md-6">
                                    <div class="form-group simple">
                                        <select class="selectpicker" id="type" data-style="btn-primary">
                                            <option value="limit">限价</option>
                                            <option value="market">市价</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4"></div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 send_order">价格</div>
                                <div class="col-md-5"><input type="number" id="price"
                                                             class="col-md-3 editor form-control"/>
                                </div>
                                <div class="col-md-4"></div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 send_order">手数</div>
                                <div class="col-md-5"><input type="number" id="volume"
                                                             class="col-md-3 editor form-control"/>
                                </div>
                                <div class="col-md-4"></div>
                            </div>
                            <div class="row list-inline">
                                <button class="btn-primary col-md-6 buy send_order" onclick="order('long')">买多</button>
                                <button class="btn-danger col-md-6 sell send_order" onclick="order('short')">卖空</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--    <div class="col-md-2">-->
    <!--        <div class="data" id="tick" style="font-size: 10px;">合约具体数据</div>-->
    <!--    </div>-->
</div>

<hr>
<div class="">
    <div class="row">


    </div>
</div>


{% endblock %}


{%block footer %}

{%endblock%}

{%block script %}
<script>
    window.onload = function () {
        // 更新个人终端数据
        var symbol = "{{ symbol }}";
        var detail_info = JSON.parse(localStorage.getItem(symbol));
        $("#cock").html("当前合约 --> {{ symbol }} " + "交易所: " + detail_info['exchange']);
        localStorage.setItem("current_symbol", symbol)
    };

    socket.on("tick", function (data) {
        // 更新实时行情
        tick = data['data'];
        if (tick.symbol != "{{symbol}}") return;
        data = '<table class="table table-bordered">' + '<th>详细数据</th> <th>值' + '</th>';
        for (key in tick) {
            if (key.includes("2") || key.includes("3") || key.includes("4") || key.includes("5")) continue;
            data += "<tr>" + "<td>" + key + "</td>" + "<td>" + tick[key] + "</td>" + "</tr>"
        }
        data += "</table>";
        $("#tick").html(data);
        // localStorage.setItem(tick.symbol, {});
        localStorage.setItem(tick.symbol, JSON.stringify(tick));
    });
    socket.on("position", function (data) {
        // 更新持仓数据
        positons = data.data;
        data = '<table class="table table-bordered">' + '<th>持仓合约</th><th>持仓方向</th><th>交易所' + '</th>' + "<th> 持仓手数 </th>" + "<th> 浮动盈亏 </th>" + "<th> 持仓均价</th>" + "<th> 昨日持仓手数</th>" + "<th> 操作</th>";
        for (var key in positons) {
            data += "<tr>" + "<td>" + positons[key]["symbol"] + "</td>" + "<td>" + positons[key]["direction"] + "</td>" + "<td>" + positons[key]["exchange"] + "</td>"
                + "<td>" + positons[key]["volume"] + "</td>" + "<td>" + positons[key]["position_profit"].toFixed(2) + "</td>" + "<td>" + positons[key]["price"].toFixed(2) + "</td>" + "<td>" + positons[key]["yd_volume"] + "</td>" + "<td>" + "<a>平仓</a>" + "</td>" + "</tr>";
        }
        data += "</table>";
        $("#position_data").html(data);
    });

    socket.on("active_order", function (data) {
        order_array = data['data'];
        data = '<table class="table table-bordered">' + '<th>报单合约</th><th>报单方向</th><th>交易所' + '</th>' + "<th> 报单手数 </th>" + "<th> 报单价格 </th>" + "<th> 状态</th>" + "<th> 价格类型</th>" + "<th> 操作</th>";
        for (var key in order_array) {
            data += "<tr>" + "<td>" + order_array[key]["symbol"] + "</td>" + "<td>" + order_array[key]["direction"] + "</td>" + "<td>" + order_array[key]["exchange"] + "</td>"
                + "<td>" + order_array[key]["volume"] + "</td>" + "<td>" + order_array[key]["price"].toFixed(2) + "</td>" + "<td>" + order_array[key]["status"] + "</td>" + "<td>" + order_array[key]["type"] + "</td>" + "<td>" + "<a>撤单</a>" + "</td>" + "</tr>";
        }
        data += "</table>";
        $("#un_traded").html(data);
    });

    socket.on("trade", function (data) {
        trade_data = data['data'];
        data = '<table class="table table-bordered">' + '<th>成交合约</th><th>报单方向</th><th>交易所' + '</th>' + "<th> 报单手数 </th>" + "<th> 报单价格 </th>" + "<th> 状态</th>" + "<th> 价格类型</th>"
        for (var key in trade_data) {
            data += "<tr>" + "<td>" + trade_data[key]["symbol"] + "</td>" + "<td>" + trade_data[key]["direction"] + "</td>" + "<td>" + trade_data[key]["exchange"] + "</td>"
                + "<td>" + trade_data[key]["volume"] + "</td>" + "<td>" + trade_data[key]["price"].toFixed(2) + "</td>" + "<td>" + trade_data[key]["status"] + "</td>" + "<td>" + trade_data[key]["type"] + "</td>" + "</tr>";
        }
        data += "</table>";
        $("#trade_data").html(data);
    });

    socket.on("order", function (data) {
        order_array = data['data'];
        data = '<table class="table table-bordered">' + '<th>报单合约</th><th>报单方向</th><th>交易所' + '</th>' + "<th> 报单手数 </th>" + "<th> 报单价格 </th>" + "<th> 状态</th>" + "<th> 价格类型</th>"
        for (var key in order_array) {
            data += "<tr>" + "<td>" + order_array[key]["symbol"] + "</td>" + "<td>" + order_array[key]["direction"] + "</td>" + "<td>" + order_array[key]["exchange"] + "</td>"
                + "<td>" + order_array[key]["volume"] + "</td>" + "<td>" + order_array[key]["price"].toFixed(2) + "</td>" + "<td>" + order_array[key]["status"] + "</td>" + "<td>" + order_array[key]["type"] + "</td>" + "</tr>";
        }
        data += "</table>";
        $("#order_data").html(data);
    });


    function order(direction) {
        price = $("#price").val();
        volume = $("#volume").val();
        type = $("#type").val();
        var detail_info = JSON.parse(localStorage.getItem("{{ symbol }}"));
        exchange = detail_info['exchange'];
        req = {
            "direction": direction,
            "offset": "open",
            "price": price,
            "volume": volume,
            "type": type,
            "exchange": exchange,
            "local_symbol": "{{ symbol }}"
        };
        $.ajax({
            dataType: "json",
            method: "POST",
            data: req,
            url: "{{ url_for('order_solve')}} ",
            success: function (data) {
                console.log(data['message'])
            },
            error: function (err) {
                console.log("error")
            }
        })
    }

    var kline = new Kline({
        element: "#kline_container",
        height: 400,
        theme: "light",
        width: 1300,
        showTrade: true,
        symbol: "{{ symbol }}",
        symbolName: "{{symbol}}",
        type: "poll", // poll/stomp
        debug: true,
        limit: 1000,
        intervalTime: 1000,
        url: "http://127.0.0.1:5000/static/json/zn1910.json",
    });
    kline.draw();


</script>

{% endblock %}